if...else

if...else 语句会在指定的条件为时执行一个语句。如果条件为,则会执行可选的 else 子句中的另一个语句。

尝试一下

语法

js
if (condition)
  statement1

// 带有 else 子句
if (condition)
  statement1
else
  statement2
condition

值为表达式

statement1

条件时执行的语句。可为任意语句,包括嵌套了 if 的语句。要执行多条语句,使用语句({ /* ... */ })将这些语句分组;若不想执行语句,则使用语句。

statement2

如果 conditionelse 从句存在时执行的语句。可为任意语句,包括块语句和嵌套的 if 语句。

描述

可以嵌套多个 if...else 语句以创建 else if 子句。请注意,JavaScript 中没有 elseif(单个词)关键字。

js
if (condition1)
  statement1
else if (condition2)
  statement2
else if (condition3)
  statement3
// …
else
  statementN

要看看它如何工作,可以调整下嵌套的缩进:

js
if (condition1)
  statement1
else
  if (condition2)
    statement2
  else
    if (condition3)
      statement3
// …

要在一个子句中执行多条语句,可使用块语句({ /* ... */ })来组织这些语句。

js
if (condition) {
  statements1
} else {
  statements2
}

不使用块可能会导致令人困惑的行为,尤其是在代码是手动格式化的情况下。例如:

js
function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a 是 1 并且 b 是 2");
  else
    console.log("a 不是 1");
}

这段代码看上去没什么问题,但是,执行 checkValue(1, 3) 会输出“a 不是 1”。这是因为在悬空 else 的情况下,else 子句会连接到最近的 if 子句。因此,上述代码在缩进适当的情况下看起来会是这样的:

js
function checkValue(a, b) {
  if (a === 1)
    if (b === 2)
      console.log("a 是 1 并且 b 是 2");
    else
      console.log("a 不是 1");
}

通常情况下,始终使用块语句是种很好的做法,特别是在涉及嵌套 if 语句的代码中。

js
function checkValue(a, b) {
  if (a === 1) {
    if (b === 2) {
      console.log("a 是 1 并且 b 是 2");
    }
  } else {
    console.log("a 不是 1");
  }
}

不要将原始的布尔值 truefalseBoolean 对象的真或假混淆。任何不是 falseundefinednull0-0NaN 或空字符串("")的值,以及任何对象(包括值为 false 的布尔对象),在用作条件时都被视为。例如:

js
const b = new Boolean(false);
if (b) {
  console.log("b 为真"); // “b 为真”
}

示例

使用 if...else

js
if (cipherChar === fromChar) {
  result += toChar;
  x++;
} else {
  result += clearChar;
}

使用 else if

请注意,JavaScript 中没有 elseif 关键字。但是,你可以在 elseif 之间加上一个空格:

js
if (x > 50) {
  /* 做一些事情 */
} else if (x > 5) {
  /* 做一些事情 */
} else {
  /* 做一些事情 */
}

使用赋值作为条件

你几乎不应该在 if...else 语句中使用像 x = y 这样的赋值作为条件:

js
if ((x = y)) {
  // …
}

因为与 while 循环不同,条件只会被求值一次,所以赋值操作只会被执行一次。上述代码等价于:

js
x = y;
if (x) {
  // …
}

这更加清晰。然而,在极少数情况下,你可能需要这样做,while 文档有使用赋值作为条件一节,其中包含我们的建议。

规范

Specification
ECMAScript Language Specification
# sec-if-statement

浏览器兼容性

BCD tables only load in the browser

参见